<template>
  <div class="goods" id="goods">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑END -->

    <!-- 分类标签 -->
    <div class="nav">
      <div class="product-nav">
        <div class="title">分类</div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane
            v-for="item in CategoryList"
            :key="item.cateid"
            :label="item.catename"
            :name="''+item.cateid"
          />
        </el-tabs>
      </div>
    </div>
    <!-- 分类标签END -->

    <!-- 主要内容区 -->
    <div class="main">
      <div class="list">
        <MyList :name="ListValue"></MyList>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"></el-pagination>
        </div>
      </div>
      <!-- 分页END -->
    </div>
    <!-- 主要内容区END -->
  </div>
</template>
<script>
import MyList from "@/components/MyList.vue";
export default {
  data() {
    return {
      ListValue: "",
      ProductList: [],
      CategoryList: [], //分类
      PhoneList: [], //手机
      TvList: [], //电视
      PjList: [], //手机壳
      ChargerList: [], //充电器
      WashList: [], //洗衣机
      AirList: [], //空调
      BhmList: [], //保护膜
      CharbaoList: [], //充电宝
      activeName: "1", // 分类列表当前选中的id 默认为1
      total: 0, // 商品总量
      pageSize: 15, // 每页显示的商品数量
      currentPage: 1 //当前页码
    };
  },
  components: {
    MyList
  },
  mounted() {
    //  获取分类
    this.$http.get("/product/category").then(res => {
      console.log(res.data);
      this.CategoryList = res.data;
    });
    // 获取所有商品数据
    this.$http.get("/product").then(res => {
      this.ProductList.push(res.data);
      for (var i = 0; i < res.data.length; i++) {
        if (res.data[i].cateid == 1) {
          this.PhoneList.push(res.data[i]);
        }
        if (res.data[i].cateid == 2) {
          this.TvList.push(res.data[i]);
        }
        if (res.data[i].cateid == 3) {
          this.AirList.push(res.data[i]);
        }
        if (res.data[i].cateid == 4) {
          this.WashList.push(res.data[i]);
        }
        if (res.data[i].cateid == 5) {
          this.PjList.push(res.data[i]);
        }
        if (res.data[i].cateid == 6) {
          this.BhmList.push(res.data[i]);
        }
        if (res.data[i].cateid == 7) {
          this.ChargerList.push(res.data[i]);
        }
        if (res.data[i].cateid == 8) {
          this.CharbaoList.push(res.data[i]);
        }
      }
      //默认显示第一项手机列表
      if(this.activeName=='1'){
        this.ListValue=this.PhoneList
      }
    });
  },
  watch: {
    // 监听点击了哪个分类标签，通过修改分类id，响应相应的商品
    activeName: function(cateid) {
      if (cateid == 1) this.ListValue = this.PhoneList;
      if (cateid == 2) this.ListValue = this.TvList;
      if (cateid == 3) this.ListValue = this.AirList;
      if (cateid == 4) this.ListValue = this.WashList;
      if (cateid == 5) this.ListValue = this.PjList;
      if (cateid == 6) this.ListValue = this.BhmList;
      if (cateid == 7) this.ListValue = this.ChargerList;
      if (cateid == 8) this.ListValue = this.CharbaoList;
    }
  },
  methods: {}
};
</script>

<style scoped>
ul {
  margin-left: 0;
}
.goods {
  background-color: #f5f5f5;
}
/* 面包屑CSS */
.el-tabs--card .el-tabs__header {
  border-bottom: none;
}
.goods .breadcrumb {
  height: 50px;
  background-color: white;
}
.goods .breadcrumb .el-breadcrumb {
  width: 1225px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
}
/* 面包屑CSS END */

/* 分类标签CSS */
.goods .nav {
  background-color: white;
}
.goods .nav .product-nav {
  width: 1225px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
}
.nav .product-nav .title {
  width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}
/* 分类标签CSS END */

/* 主要内容区CSS */
.goods .main {
  margin: 0 auto;
  max-width: 1225px;
}
.goods .main .list {
  min-height: 650px;
  padding-top: 14.5px;
  margin-left: -13.7px;
  overflow: auto;
}
.goods .main .pagination {
  height: 50px;
  text-align: center;
}
.goods .main .none-product {
  color: #333;
  margin-left: 13.7px;
}
/* 主要内容区CSS END */
</style>